<div class="dialog">
  <h1>{{i18n "dialog.preferences.title"}}</h1>
  <form  action="" method="GET" id="dialog">
    <div id="prefs-tabs">
      <ul>
        <li><a href="#prefs-tabs-general">{{i18n "dialog.preferences.general"}}</a></li>
        <li><a href="#prefs-tabs-editor">{{i18n "dialog.preferences.editor"}}</a></li>
        <li><a href="#prefs-tabs-export">{{i18n "dialog.preferences.export.title"}}</a></li>
        <li><a href="#prefs-tabs-zkn">{{i18n "dialog.preferences.zkn.title"}}</a></li>
        <li><a href="#prefs-tabs-display">{{i18n "dialog.preferences.display.title"}}</a></li>
        <li><a href="#prefs-tabs-theme">{{i18n "dialog.preferences.theme.title"}}</a></li>
        <li><a href="#prefs-tabs-spellchecking">{{i18n "dialog.preferences.spellchecking.title"}}</a></li>
        <li><a href="#prefs-tabs-autocorrect">{{ i18n "dialog.preferences.autocorrect.title" }}</a></li>
        <li><a href="#prefs-tabs-advanced">{{i18n "dialog.preferences.advanced"}}</a></li>
      </ul>



      <!-- General settings -->
      <div id="prefs-tabs-general">
        <div class="box-left">
          <label for="app-lang">{{i18n "dialog.preferences.app_lang.title"}}
          </label>
          <select name="appLang" id="app-lang">
            {{#each languages}}
            <option value="{{this.bcp47}}" data-download="{{this.todownload}}" {{#ifCond this.bcp47 '=' ../appLang}}selected="selected"{{/ifCond}}>
              {{#if this.toDownload}}
              {{i18n "dialog.preferences.translations.download"}}
              {{/if}}
              {{i18n "dialog.preferences.app_lang." this.bcp47}}
              {{#ifCond this.completion '<' 100}}
              ({{this.completion}}%)
              {{/ifCond}}
            </option>
            {{/each}}
          </select>
          <p id="app-lang-download-indicator">
            <!--<a href="#" onclick="require('electron').shell.openExternal('https://translate.zettlr.com/')">Get more languages &hellip;</a>-->
          </p>
          <hr>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="darkTheme" value="yes" id="darkTheme" {{#if darkTheme}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="darkTheme">{{i18n "dialog.preferences.nightmode"}}</label>
          </div>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="fileMeta" value="yes" id="fileMeta" {{#if fileMeta}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="fileMeta">{{i18n "dialog.preferences.file_meta"}}</label>
          </div>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="hideDirs" value="yes" id="hideDirs" {{#if hideDirs}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="hideDirs">{{i18n "dialog.preferences.hide_dirs"}}</label>
          </div>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="alwaysReloadFiles" value="yes" id="alwaysReloadFiles" {{#if alwaysReloadFiles}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="alwaysReloadFiles">{{i18n "dialog.preferences.always_reload_files"}}</label>
          </div>

          <hr>
          <!-- Now the auto dark mode settings -->
          <p>
            {{i18n "dialog.preferences.auto_dark_mode_explanation"}}
          </p>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="autoDarkMode" value="off" id="auto-dark-mode-off" {{#ifCond autoDarkMode '=' 'off'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="auto-dark-mode-off">{{i18n "dialog.preferences.auto_dark_mode_off"}}</label>
          </div>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="autoDarkMode" value="schedule" id="auto-dark-mode-schedule" {{#ifCond autoDarkMode '=' 'schedule'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="auto-dark-mode-schedule">
              {{i18n "dialog.preferences.auto_dark_mode_schedule"}}
              <input type="text" class="inline time" pattern="\d{2}:\d{2}" title="{{i18n "dialog.preferences.auto_dark_mode_schedule_format"}}" value="{{ autoDarkModeStart }}" name="autoDarkModeStart">
              &mdash;
              <input type="text" class="inline time" pattern="\d{2}:\d{2}" title="{{i18n "dialog.preferences.auto_dark_mode_schedule_format"}}" value="{{ autoDarkModeEnd }}" name="autoDarkModeEnd">
            </label>
          </div>
          {{#if hasOSDarkMode}}
          <!-- Only for macOS: Enable system switching -->
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="autoDarkMode" value="system" id="auto-dark-mode-system" {{#ifCond autoDarkMode '=' 'system'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="auto-dark-mode-system">{{i18n "dialog.preferences.auto_dark_mode_system"}}</label>
          </div>
          {{/if}}
        </div>
        <div class="box-right">
          <p>
            {{i18n "dialog.preferences.sidebar_explanation"}}
          </p>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="sidebarMode" value="thin" id="pref-sidebar-state-thin" {{#ifCond sidebarMode '=' 'thin'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-sidebar-state-thin">{{i18n "dialog.preferences.sidebar_thin"}}</label>
          </div>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="sidebarMode" value="expanded" id="pref-sidebar-state-exp" {{#ifCond sidebarMode '=' 'expanded'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-sidebar-state-exp">{{i18n "dialog.preferences.sidebar_expanded"}}</label>
          </div>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="sidebarMode" value="combined" id="pref-sidebar-state-combined" {{#ifCond sidebarMode '=' 'combined'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-sidebar-state-combined">{{i18n "dialog.preferences.sidebar_combined"}}</label>
          </div>
          <hr>
          <!-- Sorting stuff -->
          <p>
            {{i18n "dialog.preferences.sorting_explanation"}}
          </p>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="sorting" value="natural" id="pref-sorting-natural" {{#ifCond sorting '=' 'natural'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-sorting-natural">{{i18n "dialog.preferences.sorting_natural"}}</label>
          </div>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="sorting" value="ascii" id="pref-sorting-ascii" {{#ifCond sorting '=' 'ascii'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-sorting-ascii">{{i18n "dialog.preferences.sorting_ascii"}}</label>
          </div>
          <p>
            {{i18n "dialog.preferences.sorting_time_explanation"}}
          </p>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="sortingTime" value="modtime" id="pref-sorting-modtime" {{#ifCond sortingTime '=' 'modtime'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-sorting-modtime">{{i18n "dialog.preferences.modtime"}}</label>
          </div>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="sortingTime" value="creationtime" id="pref-sorting-creationtime" {{#ifCond sortingTime '=' 'creationtime'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-sorting-creationtime">{{i18n "dialog.preferences.creationtime"}}</label>
          </div>
        </div> <!-- End box right -->
      </div>



      <!-- Editor related options -->
      <div id="prefs-tabs-editor">
        <div class="clear"></div>
        <div class="box-left">
          <p>
            {{i18n "dialog.preferences.formatting_characters_explanation"}}
          </p>
          <!-- It's so great that these boxes also work nested <3 CSS ftw -->
          <div class="box-left">
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="editor.boldFormatting" value="**" id="pref-bold-formatting-stars" {{#ifCond editor.boldFormatting '=' '**'}}checked="checked"{{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label for="pref-bold-formatting-stars"><strong>**{{i18n 'gui.formatting.bold'}}**</strong></label>
            </div>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="editor.boldFormatting" value="__" id="pref-bold-formatting-underscore" {{#ifCond editor.boldFormatting '=' '__'}}checked="checked"{{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label for="pref-bold-formatting-underscore"><strong>__{{i18n 'gui.formatting.bold'}}__</strong></label>
            </div>
          </div>
          <div class="box-right">
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="editor.italicFormatting" value="*" id="pref-em-formatting-stars" {{#ifCond editor.italicFormatting '=' '*'}}checked="checked"{{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label for="pref-em-formatting-stars"><em>*{{i18n 'gui.formatting.italic'}}*</em></label>
            </div>
            <div class="cb-group">
              <label class="radio-toggle">
                <input type="radio" name="editor.italicFormatting" value="_" id="pref-em-formatting-underscore" {{#ifCond editor.italicFormatting '=' '_'}}checked="checked"{{/ifCond}}>
                <div class="toggle"></div>
              </label>
              <label for="pref-em-formatting-underscore"><em>_{{i18n 'gui.formatting.italic'}}_</em></label>
            </div>
          </div>
          <hr>
          <label for="editor.defaultSaveImagePath">
            {{i18n "dialog.preferences.default_image_save_path"}}
          </label>
          <input type="text" name="editor.defaultSaveImagePath" id="editor.defaultSaveImagePath" value="{{ editor.defaultSaveImagePath }}">
          <label for="editor.indentUnit">
            {{i18n "dialog.preferences.indent_unit"}}
          </label>
          <input type="number" min="1" max="12" class="inline" name="editor.indentUnit" id="editor.indentUnit" value="{{ editor.indentUnit }}">
          <hr>
          {{i18n "dialog.preferences.readability_algorithm"}}
          <select name="editor.readabilityAlgorithm">
            <option value="dale-chall" {{#ifCond editor.readabilityAlgorithm '=' 'dale-chall'}}selected="selected"{{/ifCond}}>Dale-Chall</option>
            <option value="gunning-fog" {{#ifCond editor.readabilityAlgorithm '=' 'gunning-fog'}}selected="selected"{{/ifCond}}>Gunning-Fog</option>
            <option value="coleman-liau" {{#ifCond editor.readabilityAlgorithm '=' 'coleman-liau'}}selected="selected"{{/ifCond}}>Coleman/Liau</option>
            <option value="automated-readability" {{#ifCond editor.readabilityAlgorithm '=' 'automated-readability'}}selected="selected"{{/ifCond}}>Automated Readability Index (ARI)</option>
          </select>
        </div>
        <div class="box-right">
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="muteLines" value="yes" id="muteLines" {{#if muteLines}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="muteLines">{{i18n "dialog.preferences.mute_lines"}}</label>
          </div>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="editor.autoCloseBrackets" value="yes" id="autoCloseBrackets" {{#if editor.autoCloseBrackets}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="autoCloseBrackets">{{i18n "dialog.preferences.auto_close_brackets"}}</label>
          </div>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="editor.homeEndBehaviour" value="yes" id="homeEndBehaviour" {{#if editor.homeEndBehaviour}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="homeEndBehaviour">{{i18n "dialog.preferences.homeEndBehaviour"}}</label>
          </div>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="editor.enableTableHelper" value="yes" id="enableTableHelper" {{#if editor.enableTableHelper}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="enableTableHelper">{{i18n "dialog.preferences.enable_table_helper"}}</label>
          </div>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="editor.countChars" value="yes" id="countChars" {{#if editor.countChars}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="countChars">{{i18n "dialog.preferences.count_chars"}}</label>
          </div>

          {{!-- RTL support options --}}
          <hr>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="editor.rtlMoveVisually" value="yes" id="rtlMoveVisually" {{#if editor.rtlMoveVisually}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="rtlMoveVisually">{{i18n "dialog.preferences.editor_setting.rtl_move_visually"}}</label>
          </div>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="editor.direction" value="ltr" id="pref-editor-direction-ltr" {{#ifCond editor.direction '=' 'ltr'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-editor-direction-ltr">{{i18n "dialog.preferences.editor_setting.direction_ltr"}}</label>
          </div>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="editor.direction" value="rtl" id="pref-editor-direction-rtl" {{#ifCond editor.direction '=' 'rtl'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-editor-direction-rtl">{{i18n "dialog.preferences.editor_setting.direction_rtl"}}</label>
          </div>

          <hr>
          <div class="cb-group">
            {{i18n "dialog.preferences.input_mode"}}
            <select name="editor.inputMode">
              <option value="default" {{#ifCond editor.inputMode '=' 'default'}}selected="selected"{{/ifCond}}>Normal</option>
              <option value="vim" {{#ifCond editor.inputMode '=' 'vim'}}selected="selected"{{/ifCond}}>Vim</option>
              <option value="emacs" {{#ifCond editor.inputMode '=' 'emacs'}}selected="selected"{{/ifCond}}>Emacs</option>
            </select>
          </div>
        </div>
        <div class="clear"></div>
      </div>



      <!-- Export related options (except pandoc+xelatex) -->
      <div id="prefs-tabs-export">
        <div class="box-left">
          <p>{{i18n "dialog.preferences.export.stripping"}}</p>
          <p>
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="export.stripIDs" value="yes" id="export.stripIDs" {{#if export.stripIDs}}checked="checked"{{/if}}>
                <div class="toggle"></div>
              </label>
              <label for="export.stripIDs">{{i18n "dialog.preferences.export.strip_id_label"}}</label>
            </div>
            <div class="cb-group">
              <label class="cb-toggle">
                <input type="checkbox" name="export.stripTags" value="yes" id="export.stripTags" {{#if export.stripTags}}checked="checked"{{/if}}>
                <div class="toggle"></div>
              </label>
              <label for="export.stripTags">{{i18n "dialog.preferences.export.strip_tags_label"}}</label>
            </div>
          </p>
          <hr>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="export.stripLinks" value="full" id="pref-export-strip-link-full" {{#ifCond export.stripLinks '=' 'full'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-export-strip-link-full">{{i18n "dialog.preferences.export.strip_links_full_label"}}</label>
          </div>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="export.stripLinks" value="unlink" id="pref-export-strip-link-unlink" {{#ifCond export.stripLinks '=' 'unlink'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-export-strip-link-unlink">{{i18n "dialog.preferences.export.strip_links_unlink_label"}}</label>
          </div>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="export.stripLinks" value="no" id="pref-export-strip-link-no" {{#ifCond export.stripLinks '=' 'no'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-export-strip-link-no">{{i18n "dialog.preferences.export.strip_links_no_label"}}</label>
          </div>
        </div>
        <div class="box-right">
          <p>
            {{i18n "dialog.preferences.export.dest"}}
          </p>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="export.dir" value="temp" id="pref-export-temp" {{#ifCond export.dir '=' 'temp'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-export-temp">{{i18n "dialog.preferences.export.dest_temp_label"}}</label>
          </div>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="export.dir" value="cwd" id="pref-export-cwd" {{#ifCond export.dir '=' 'cwd'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-export-cwd">{{i18n "dialog.preferences.export.dest_cwd_label"}}</label>
          </div>
          <hr>
          <label for="cslLibrary">{{i18n "dialog.preferences.citation_database"}}</label>
          <div class="input-button-group">
            <input type="text" name="export.cslLibrary" id="cslLibrary" value="{{export.cslLibrary}}">
            <button type="button" class="request-file"
            data-tippy-content="{{i18n "dialog.preferences.choose_file"}}"
            data-request-name="CSL JSON or BibTex"
            data-request-ext="json,bib"
            data-request-target="#cslLibrary"><clr-icon shape="file"></clr-icon></button>
          </div>
          <label for="cslStyle">{{i18n "dialog.preferences.project.csl_style"}}</label>
          <div class="input-button-group">
            <input type="text" name="export.cslStyle" id="cslStyle" value="{{export.cslStyle}}">
            <button type="button" class="request-file"
            data-tippy-content="{{i18n "dialog.preferences.choose_file"}}"
            data-request-name="Citation Style Language File"
            data-request-ext="csl"
            data-request-target="#cslStyle"><clr-icon shape="file"></clr-icon></button>
          </div>
        </div>
      </div>



      <!-- Zettelkasten options -->
      <div id="prefs-tabs-zkn">
        <div class="box-left">
          <label for="pref-zkn-free-id">{{i18n "dialog.preferences.zkn.id_label"}}</label>
          <div class="input-button-group">
            <input type="text" id="pref-zkn-free-id" value="{{zkn.idRE}}" name="zkn.idRE">
            <button type="button" id="reset-id-regex" data-tippy-content="{{i18n "dialog.preferences.zkn.reset_default_id"}}"><clr-icon shape="refresh"></clr></button>
          </div>
          <label for="pref-zkn-free-linkstart">{{i18n "dialog.preferences.zkn.linkstart_label"}}</label>
          <div class="input-button-group">
            <input type="text" id="pref-zkn-free-linkstart" value="{{zkn.linkStart}}" name="zkn.linkStart">
            <button type="button" id="reset-linkstart-regex" data-tippy-content="{{i18n "dialog.preferences.zkn.reset_default_linkstart"}}"><clr-icon shape="refresh"></clr></button>
          </div>
          <label for="pref-zkn-free-linkend">{{i18n "dialog.preferences.zkn.linkend_label"}}</label>
          <div class="input-button-group">
            <input type="text" id="pref-zkn-free-linkend" value="{{zkn.linkEnd}}" name="zkn.linkEnd">
            <button type="button" id="reset-linkend-regex" data-tippy-content="{{i18n "dialog.preferences.zkn.reset_default_linkend"}}"><clr-icon shape="refresh"></clr></button>
          </div>
          <label for="pref-zkn-id-gen">{{i18n "dialog.preferences.zkn.id_generator_label"}}</label>
          <div class="input-button-group">
            <input type="text" id="pref-zkn-id-gen" value="{{zkn.idGen}}" name="zkn.idGen">
            <button type="button" id="reset-id-generator" data-tippy-content="{{i18n "dialog.preferences.zkn.reset_default_generator"}}"><clr-icon shape="refresh"></clr></button>
          </div>
          <hr>
          <p>
            <button type="button" id="generate-id">{{i18n "dialog.preferences.zkn.test_id_generator"}}</button>
          </p>
          <p>{{i18n "dialog.preferences.zkn.generated_id"}}: <strong><span id="generator-tester"></span></strong></p>
          <p><span id="pass-check"></span></p>
        </div>
        <div class="box-right">
          <p>
            {{i18n "dialog.preferences.zkn.intro"}}
            <ul>
              <li><strong>%Y</strong>: {{i18n "dialog.preferences.zkn.var_year"}}</li>
              <li><strong>%M</strong>: {{i18n "dialog.preferences.zkn.var_month"}}</li>
              <li><strong>%D</strong>: {{i18n "dialog.preferences.zkn.var_day"}}</li>
              <li><strong>%W</strong>: {{i18n "dialog.preferences.zkn.var_week_number"}}</li>
              <li><strong>%h</strong>: {{i18n "dialog.preferences.zkn.var_hour"}}</li>
              <li><strong>%m</strong>: {{i18n "dialog.preferences.zkn.var_minute"}}</li>
              <li><strong>%s</strong>: {{i18n "dialog.preferences.zkn.var_second"}}</li>
              <li><strong>%uuid4</strong>: Universally Unique Identifier (UUID) v4</li>
            </ul>
          </p>
          {{!-- Add the preferences to determine file linking --}}
          <hr>
          {{i18n "dialog.preferences.zkn.link_behaviour_description"}}
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="zkn.linkWithFilename" value="always" id="pref-link-always" {{#ifCond zkn.linkWithFilename '=' 'always'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-link-always">{{i18n "dialog.preferences.zkn.link_behaviour_always"}}</label>
          </div>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="zkn.linkWithFilename" value="withID" id="pref-link-with-id" {{#ifCond zkn.linkWithFilename '=' 'withID'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-link-with-id">{{i18n "dialog.preferences.zkn.link_behaviour_id"}}</label>
          </div>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="zkn.linkWithFilename" value="never" id="pref-link-never" {{#ifCond zkn.linkWithFilename '=' 'never'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-link-never">{{i18n "dialog.preferences.zkn.link_behaviour_never"}}</label>
          </div>

          {{!-- Should Zettlr automatically create files that it did not find when following a ZKN link? --}}
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="zkn.autoCreateLinkedFiles" value="yes" id="zkn.autoCreateLinkedFiles" {{#if zkn.autoCreateLinkedFiles}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="zkn.autoCreateLinkedFiles">{{i18n "dialog.preferences.zkn.auto_create_file" }}</label>
          </div>
        </div>
      </div>



      <!-- Display options -->
      <div id="prefs-tabs-display">
        <div class="box-left">
          <p>{{i18n "dialog.preferences.display.image_size_info"}}</p>
          <div class="image-size">
            <div class="image"></div>
            <input type="range" min="1" max="100" id="imageWidth" name="display.imageWidth" value="{{display.imageWidth}}">
            <input type="range" min="1" max="100" id="imageHeight" name="display.imageHeight" value="{{display.imageHeight}}">
            <div id="preview-image-sizes">{{display.imageWidth}}% &times; {{display.imageHeight}}%</div>
          </div>
          <hr>
          <p>
            {{i18n "dialog.preferences.display_time_explanation"}}
          </p>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="fileMetaTime" value="modtime" id="pref-display-modtime" {{#ifCond fileMetaTime '=' 'modtime'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-display-modtime">{{i18n "dialog.preferences.modtime"}}</label>
          </div>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="fileMetaTime" value="creationtime" id="pref-display-creationtime" {{#ifCond fileMetaTime '=' 'creationtime'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="pref-display-creationtime">{{i18n "dialog.preferences.creationtime"}}</label>
          </div>
          <hr>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="display.useFirstHeadings" value="yes" id="display.useFirstHeadings" {{#if display.useFirstHeadings}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="display.useFirstHeadings">{{i18n "dialog.preferences.display.use_first_headings"}}</label>
          </div>
        </div>
        <div class="box-right">
          <p>{{i18n "dialog.preferences.display.preview_info"}}</p>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="display.renderCitations" value="yes" id="display.renderCitations" {{#if display.renderCitations}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="display.renderCitations">{{i18n "dialog.preferences.display.render_citations"}}</label>
          </div>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="display.renderIframes" value="yes" id="display.renderIframes" {{#if display.renderIframes}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="display.renderIframes">{{i18n "dialog.preferences.display.render_iframes"}}</label>
          </div>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="display.renderImages" value="yes" id="display.renderImages" {{#if display.renderImages}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="display.renderImages">{{i18n "dialog.preferences.display.render_images"}}</label>
          </div>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="display.renderLinks" value="yes" id="display.renderLinks" {{#if display.renderLinks}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="display.renderLinks">{{i18n "dialog.preferences.display.render_links"}}</label>
          </div>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="display.renderMath" value="yes" id="display.renderMath" {{#if display.renderMath}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="display.renderMath">{{i18n "dialog.preferences.display.render_math"}}</label>
          </div>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="display.renderTasks" value="yes" id="display.renderTasks" {{#if display.renderTasks}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="display.renderTasks">{{i18n "dialog.preferences.display.render_tasks"}}</label>
          </div>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="display.renderHTags" value="yes" id="display.renderHTags" {{#if display.renderHTags}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="display.renderHTags">{{i18n "dialog.preferences.display.render_htags"}}</label>
          </div>
        </div>
      </div>



      <!-- THEME SWITCHING OPTIONS -->
      <div id="prefs-tabs-theme">
        <p>
          {{i18n "dialog.preferences.theme.info"}}
        </p>
        <div class="theme-container">
          <!-- Berlin Theme Mockup -->
          <div class="theme-container-item">
            <div id="theme-berlin-mockup" data-theme="berlin" class="theme-mockup">
              <div class="traffic-lights">
                <div class="traffic-light-close"></div>
                <div class="traffic-light-min"></div>
                <div class="traffic-light-full"></div>
              </div>
              <div class="toolbar"></div>
              <div class="file-list">
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
              </div>
              <div class="editor">
                <p>Berlin</p>
              </div>
            </div>
          </div>
          <!-- Frankfurt Theme Mockup -->
          <div class="theme-container-item">
            <div id="theme-frankfurt-mockup" data-theme="frankfurt" class="theme-mockup">
              <div class="traffic-lights">
                <div class="traffic-light-close"></div>
                <div class="traffic-light-min"></div>
                <div class="traffic-light-full"></div>
              </div>
              <div class="toolbar"></div>
              <div class="file-list">
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
              </div>
              <div class="editor">
                <p>Frankfurt</p>
              </div>
            </div>
          </div>
          <!-- Bielefeld Theme Mockup -->
          <div class="theme-container-item">
            <div id="theme-bielefeld-mockup" data-theme="bielefeld" class="theme-mockup">
              <div class="traffic-lights">
                <div class="traffic-light-close"></div>
                <div class="traffic-light-min"></div>
                <div class="traffic-light-full"></div>
              </div>
              <div class="toolbar"></div>
              <div class="file-list">
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
              </div>
              <div class="editor">
                <p>Bielefeld</p>
              </div>
            </div>
          </div>
          <!-- Karl Marx Stadt Theme Mockup -->
          <div class="theme-container-item">
            <div id="theme-karl-marx-stadt-mockup" data-theme="karl-marx-stadt" class="theme-mockup">
              <div class="traffic-lights">
                <div class="traffic-light-close"></div>
                <div class="traffic-light-min"></div>
                <div class="traffic-light-full"></div>
              </div>
              <div class="toolbar"></div>
              <div class="file-list">
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
              </div>
              <div class="editor">
                <p>Karl-Marx-Stadt</p>
              </div>
            </div>
          </div>
          {{!-- Bordeaux Theme Mockup --}}
          <div class="theme-container-item">
            <div id="theme-bordeaux-mockup" data-theme="bordeaux" class="theme-mockup">
              <div class="traffic-lights">
                <div class="traffic-light-close"></div>
                <div class="traffic-light-min"></div>
                <div class="traffic-light-full"></div>
              </div>
              <div class="toolbar"></div>
              <div class="file-list">
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
                <div class="file-list-item"></div>
              </div>
              <div class="editor">
                <p>Bordeaux</p>
              </div>
            </div>
          </div>
        </div>
      </div>




      {{!-- Spellchecking options --}}
      <div id="prefs-tabs-spellchecking">
        <div class="box-left">
          <p>{{i18n "dialog.preferences.spellcheck"}}</p>
          <p>{{i18n "dialog.preferences.spellcheck_warning"}}</p>
          <input type="text" class="dicts-list-search" placeholder="{{i18n "dialog.preferences.spellcheck_search_placeholder"}}">
          <ul class="dicts-list">
            {{#each availableDicts}}
            <li class="cb-group dicts-list-item">
              <label class="cb-toggle">
                <input type="checkbox" name="selectedDicts" value="{{this}}" id="{{this}}" {{#ifIn this ../selectedDicts}}checked="checked"{{/ifIn}}>
                <div class="toggle"></div>
              </label>
              <label for="{{this}}">{{transDict this}}</label>
            </li>
            {{/each}}
          </ul>
        </div>
        <div class="box-right">
          <!-- Here come the custom user dictionary words! -->
          <p>{{i18n "dialog.preferences.user_dictionary"}}</p>
          <ul class="user-dict">
            {{#each userDictionary}}
            <li class="user-dict-item">
              <input type="hidden" value="{{this}}" name="userDictionary">
              <span>{{this}}</span>
              <clr-icon shape="times"></clr-icon>
            </li>
            {{/each}}
          </ul>
        </div>
      </div>


      {{!-- AutoCorrect Options --}}
      <div id="prefs-tabs-autocorrect">
        <div class="box-left">
          {{!-- Activate AutoCorrect? --}}
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="editor.autoCorrect.active" value="yes" id="autoCorrectActive" {{#if editor.autoCorrect.active}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="autoCorrectActive">{{i18n "dialog.preferences.autocorrect.active_label"}}</label>
          </div>

          <hr>
          {{!-- AutoCorrect style --}}
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="editor.autoCorrect.style" value="Word" id="autoCorrectStyleWord" {{#ifCond editor.autoCorrect.style '=' 'Word'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="autoCorrectStyleWord">{{i18n "dialog.preferences.autocorrect.style_word_label"}}</label>
          </div>
          <div class="cb-group">
            <label class="radio-toggle">
              <input type="radio" name="editor.autoCorrect.style" value="LibreOffice" id="autoCorrectStyleLibreOffice" {{#ifCond editor.autoCorrect.style '=' 'LibreOffice'}}checked="checked"{{/ifCond}}>
              <div class="toggle"></div>
            </label>
            <label for="autoCorrectStyleLibreOffice">{{i18n "dialog.preferences.autocorrect.style_libre_office_label"}}</label>
          </div>
          <hr>

          {{!-- Magic Quotes Section --}}
          <div class="box-left">
            <label for="autoCorrectQuotesDouble">{{ i18n "dialog.preferences.autocorrect.quotes_double_label" }}</label>
            <select name="autoCorrectQuotesDouble" id="autoCorrectQuotesDouble">
              {{!-- Taken from: https://de.wikipedia.org/wiki/Anf%C3%BChrungszeichen --}}
              {{!-- ATTENTION when adding new pairs: They will be SPLIT using the hyphen character! --}}
              <option value='"…"'{{#ifCond primaryQuotes '=' '"…"'}}selected="selected"{{/ifCond}}>"…"</option>
              <option value="“…”"{{#ifCond primaryQuotes '=' '“…”'}}selected="selected"{{/ifCond}}>“…”</option>
              <option value="”…”"{{#ifCond primaryQuotes '=' '”…”'}}selected="selected"{{/ifCond}}>”…”</option>
              <option value="„…“"{{#ifCond primaryQuotes '=' '„…“'}}selected="selected"{{/ifCond}}>„…“</option>
              <option value="„…”"{{#ifCond primaryQuotes '=' '„…”'}}selected="selected"{{/ifCond}}>„…”</option>
              <option value="“…„"{{#ifCond primaryQuotes '=' '“…„'}}selected="selected"{{/ifCond}}>“…„</option>
              <option value="“ … ”"{{#ifCond primaryQuotes '=' '“ … ”'}}selected="selected"{{/ifCond}}>“ … ”</option>
              <option value="»…«"{{#ifCond primaryQuotes '=' '»…«'}}selected="selected"{{/ifCond}}>»…«</option>
              <option value="«…»"{{#ifCond primaryQuotes '=' '«…»'}}selected="selected"{{/ifCond}}>«…»</option>
              <option value="»…»"{{#ifCond primaryQuotes '=' '»…»'}}selected="selected"{{/ifCond}}>»…»</option>
              <option value="‘…’"{{#ifCond primaryQuotes '=' '‘…’'}}selected="selected"{{/ifCond}}>‘…’</option>
              <option value="« … »"{{#ifCond primaryQuotes '=' '« … »'}}selected="selected"{{/ifCond}}>« … »</option>
              <option value="「…」"{{#ifCond primaryQuotes '=' '「…」'}}selected="selected"{{/ifCond}}>「…」</option>
              <option value="『…』"{{#ifCond primaryQuotes '=' '『…』'}}selected="selected"{{/ifCond}}>『…』</option>
            </select>
          </div>
          <div class="box-right">
            <label for="autoCorrectQuotesSingle">{{ i18n "dialog.preferences.autocorrect.quotes_single_label" }}</label>
            <select name="autoCorrectQuotesSingle" id="autoCorrectQuotesSingle">
              {{!-- Taken from: https://de.wikipedia.org/wiki/Anf%C3%BChrungszeichen --}}
              {{!-- ATTENTION when adding new pairs: They will be SPLIT using the hyphen character! --}}
              <option value="'…'"{{#ifCond secondaryQuotes '=' "'…'"}}selected="selected"{{/ifCond}}>'…'</option>
              <option value="‘…’"{{#ifCond secondaryQuotes '=' '‘…’'}}selected="selected"{{/ifCond}}>‘…’</option>
              <option value="’…’"{{#ifCond secondaryQuotes '=' '’…’'}}selected="selected"{{/ifCond}}>’…’</option>
              <option value="‚…‘"{{#ifCond secondaryQuotes '=' '‚…‘'}}selected="selected"{{/ifCond}}>‚…‘</option>
              <option value="‚…’"{{#ifCond secondaryQuotes '=' '‚…’'}}selected="selected"{{/ifCond}}>‚…’</option>
              <option value="‘…‚"{{#ifCond secondaryQuotes '=' '‘…‚'}}selected="selected"{{/ifCond}}>‘…‚</option>
              <option value="‘ … ’"{{#ifCond secondaryQuotes '=' '‘ … ’'}}selected="selected"{{/ifCond}}>‘ … ’</option>
              <option value="›…‹"{{#ifCond secondaryQuotes '=' '›…‹'}}selected="selected"{{/ifCond}}>›…‹</option>
              <option value="‹…›"{{#ifCond secondaryQuotes '=' '‹…›'}}selected="selected"{{/ifCond}}>‹…›</option>
              <option value="›…›"{{#ifCond secondaryQuotes '=' '›…›'}}selected="selected"{{/ifCond}}>›…›</option>
              <option value="‹ … ›"{{#ifCond secondaryQuotes '=' '‹ … ›'}}selected="selected"{{/ifCond}}>‹ … ›</option>
              <option value="«…»"{{#ifCond secondaryQuotes '=' '«…»'}}selected="selected"{{/ifCond}}>«…»</option>
              <option value="„…“"{{#ifCond secondaryQuotes '=' '„…“'}}selected="selected"{{/ifCond}}>„…“</option>
              <option value="„…”"{{#ifCond secondaryQuotes '=' '„…”'}}selected="selected"{{/ifCond}}>„…”</option>
              <option value="「…」"{{#ifCond secondaryQuotes '=' '「…」'}}selected="selected"{{/ifCond}}>「…」</option>
              <option value="『…』"{{#ifCond secondaryQuotes '=' '『…』'}}selected="selected"{{/ifCond}}>『…』</option>
            </select>
          </div>
          {{!-- Add the quick-selectors --}}
          <p>{{ i18n "dialog.preferences.autocorrect.quick_select_label" }}</p>
          <button class="mq-select" data-primary="0" data-secondary="0">{{ i18n "dialog.preferences.autocorrect.quick_select_none_label" }}</button>
          <button class="mq-select" data-primary="1" data-secondary="1">{{  i18n "dialog.preferences.app_lang.en-GB" }}</button>
          <button class="mq-select" data-primary="3" data-secondary="3">{{  i18n "dialog.preferences.app_lang.de-DE" }}</button>
          <button class="mq-select" data-primary="11" data-secondary="10">{{  i18n "dialog.preferences.app_lang.fr-FR" }}</button>
          <button class="mq-select" data-primary="13" data-secondary="14">{{  i18n "dialog.preferences.app_lang.ja-JP" }}</button>
        </div>
        <div class="box-right">
          {{!-- Replacement Table --}}
          <p>{{i18n "dialog.preferences.autocorrect.replacement_info"}}</p>
          <div class="modal-container-constrain-size">
            <table>
              <tbody id="autocorrect-key-container">
                {{#each autoCorrectReplacements }}
                <tr>
                  <td>
                    <div class="input-button-group">
                      <input type="text" name="autoCorrectKeys[]" value="{{ key }}">
                    </div>
                  </td>
                  <td>
                    <div class="input-button-group">
                      <input type="text" name="autoCorrectValues[]" value="{{ value }}">
                      <button class="autocorrect-remove-row"><clr-icon shape="times"></clr-icon></button>
                    </div>
                  </td>
                </tr>
                {{/each}}
              </tbody>
            </table>
          </div>
          <button id="add-autocorrect-key" class="icon"><clr-icon shape="plus"></clr-icon></button>
          </div>
      </div>



      <!-- Export/seldomly used options -->
      <div id="prefs-tabs-advanced">
        <div class="box-left">
          <label for="filename-generator">
            {{i18n "dialog.preferences.filename_generator"}}
          </label>
          <input type="text" id="filename-generator" name="newFileNamePattern" placeholder="%id.md" value="{{newFileNamePattern}}">
          <span class="info">Variables: %id, %Y, %M, %D, %W, %h, %m, %s, %uuid4</span>

          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="newFileDontPrompt" value="yes" id="newFileDontPrompt" {{#if newFileDontPrompt}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="newFileDontPrompt">{{i18n "dialog.preferences.new_file_dont_prompt"}}</label>
          </div>

          <label for="pandoc">
            {{i18n "dialog.preferences.pandoc"}}
          </label>
          <input type="text" id="pandoc" name="pandoc" placeholder="{{i18n "dialog.preferences.pandoc_default"}}" value="{{pandoc}}">

          <label for="xelatex">
            {{i18n "dialog.preferences.xelatex"}}
          </label>
          <input type="text" id="xelatex" name="xelatex" placeholder="{{i18n "dialog.preferences.xelatex_default"}}" value="{{xelatex}}">
          <hr>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="debug" value="yes" id="debug" {{#if debug}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="debug">{{i18n "dialog.preferences.debug"}}</label>
          </div>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="checkForBeta" value="yes" id="checkForBeta" {{#if checkForBeta}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="checkForBeta">{{i18n "dialog.preferences.checkForBeta"}}</label>
          </div>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="enableRMarkdown" value="yes" id="enableRMarkdown" {{#if enableRMarkdown}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="enableRMarkdown">{{i18n "dialog.preferences.enable_rmarkdown"}}</label>
          </div>
        </div>
        <div class="box-right">
          <p>{{i18n "dialog.preferences.attachments_info"}}</p>
          <textarea id="attachmentExtensions" name="attachmentExtensions" rows="4">{{attachmentExtensions}}</textarea>

          <!-- Pandoc command resides here, because here's more space for it -->
          <hr>
          <label for="pandocCommand">
            {{i18n "dialog.preferences.pandoc_command"}}
          </label>
          <div class="input-button-group">
            <input type="text" id="pandocCommand" name="pandocCommand" placeholder="pandoc &quot;$infile$&quot; -f markdown $outflag$ $tpl$ $toc$ $tocdepth$ $citeproc$ $standalone$ --pdf-engine=xelatex --mathjax -o &quot;$outfile$&quot;" value="{{ pandocCommand }}">
            <button type="button" id="reset-pandoc-command" data-tippy-content="{{i18n "dialog.preferences.reset_pandoc_command"}}"><clr-icon shape="refresh"></clr></button>
          </div>
          <span class="info">Variables: $citeproc$, $format$, $infile$, $indir$, $outfile$, $outflag$, $standalone$, $toc$, $tocdepth$, $tpl$</span>

          <hr>

          {{!-- Watchdog polling compatibility options --}}
          <p>
            {{i18n "dialog.preferences.watchdog_explainer"}}
          </p>
          <div class="cb-group">
            <label class="cb-toggle">
              <input type="checkbox" name="watchdog.activatePolling" value="yes" id="activateWatchdogPolling" {{#if watchdog.activatePolling}}checked="checked"{{/if}}>
              <div class="toggle"></div>
            </label>
            <label for="activateWatchdogPolling">{{i18n "dialog.preferences.watchdog_checkbox_label"}}</label>
          </div>

          <input class="inline time" type="number" min="0" max="10000" step="1" name="watchdog.stabilityThreshold" id="watchdogPollingStability" value="{{watchdog.stabilityThreshold}}" placeholder="1000">
          <label class="" for="watchdogPollingStability">{{i18n "dialog.preferences.watchdog_threshold_label"}}</label>

        </div> <!-- End box right -->
      </div>
    </div>
    <div class="prefs-submit-group">
      <button type="submit" id="pref-save">{{i18n "dialog.button.save"}}</button>
      <button id="abort">{{i18n "dialog.button.cancel"}}</button>
      <span class="error-info"></span>
    </div>
  </form>
</div>
